import React, { Component } from 'react';
import 'antd/dist/antd.css'; 
import { Input, Button, List } from 'antd'

function TodoListUI (props) {  //无状态组件，无状态组件性能上比普通组件要高
    return(
      <div style={{ margin: '10px'}}>
        <Input
          placeholder="请输入内容......"
          style={{ width: '300px', marginRight: 10 }}
          value={props.inputValue}
          onChange={props.handleChange}
        />
        <Button type="primary" onClick={props.additem}>提交</Button>
        <List
          style={{ width: '375px', marginTop: '10px' }}
          bordered
          dataSource={props.list}
          renderItem={(item, index) => (
            <List.Item
             onClick = {(index) =>{props.deleteitem(index)}}
            >
             {item}
            </List.Item>
          )}
        />
      </div>
    )

}

export default TodoListUI;